<template>
  <!-- 处罚详情  -->
  <view class="penaltyDetail">
    <view class="wrapper">
      <view class="wrapper-item wrapper-zero">
        <view class="facility-item" style="padding-bottom: 30rpx">
          <view class="line-hidden nameTitle">
            {{ options.restaurantName || "" }}
          </view>
        </view>

        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">餐厅负责人：</view>
            <view class="value valueName">
              {{ options.restaurantChargeName || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">联系电话：</view>
            <view class="value valueName">
              {{ options.restaurantChargePhone || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">营业地址：</view>
            <view class="value valueName">
              {{ options.restaurantAddress || "" }}
            </view>
          </view>
        </view>
      </view>

      <view
        class="wrapper-item wrapper-zero"
        style="padding: 35rpx 40rpx 30rpx"
      >
        <view class="topic">
          <image
            :src="baseImgUrl + 'record-icon.png'"
            mode="aspectFill"
          ></image>
          处罚记录
        </view>

        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">处罚时间：</view>
            <view class="value valueName">
              {{ options.penaltyTime || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">执法队员：</view>
            <view class="value valueName">
              {{
                options.personNameList.length > 1
                  ? options.personNameList.join("、")
                  : options.personNameList
              }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">处罚结果：</view>
            <view class="value valueName">
              {{ options.penaltyResult }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">违规时间：</view>
            <view class="value valueName">
              {{ options.violationStartTime }}-{{ options.violationEndTime }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">违规行为：</view>
            <view class="value valueName">
              {{ options.penaltyContent }}
            </view>
          </view>

          <view class="facility-item" style="margin-bottom: 10rpx">
            <view class="textAlign label">处罚依据：</view>
          </view>
          <view class="bottomClass spotImg">
            <view class="bcimg" v-for="item in patrolPath" :key="item.id">
              <image :src="imgPrefix + item.path" mode="aspectFill"></image>
            </view>
          </view>
          <view class="facility-item">
            <view class="label">附件：</view>
          </view>

          <view class="listedFiles">
            <view>
              <image
                :src="baseImgUrl + 'pdfIcon.png'"
                mode="aspectFill"
              ></image>
            </view>
            <view>
              <view class="line-hidden lfname">
                {{ options.evidenceName }}
              </view>
              <view class="lftime">
                <view>
                  {{ options.evidenceUploadTime }}
                </view>
                <view
                  style="display: flex; color: #00c9ae"
                  @click="downLoadFile"
                >
                  <u-icon name="download" color="#00C9AE"></u-icon>预览
                </view>
              </view>
            </view>
          </view>

          <web-view v-if="webFlag" :src="webSrc"></web-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { imagesPathList } from "@/api/api.js";
import { handleClickRouter, pvwImage } from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      options: {},
      imgPrefix: uni.getStorageSync("imgPrefix"),
      scenePath: [],
      webFlag: false,
      webSrc: "",
      patrolPath: [],
    };
  },
  onLoad(options) {
    this.options = JSON.parse(decodeURIComponent(options.data));

    this.getDetail();
  },
  onShow() {},
  methods: {
    handleClickRouter,
    pvwImage,
    downLoadFile() {
      let _this = this;

      wx.getSystemInfo({
        success: function (res) {
          if (res.platform == "devtools" || res.platform == "android") {
            wx.downloadFile({
              url: _this.imgPrefix + _this.options.evidenceUrl,
              // filePath:
              //   wx.env.USER_DATA_PATH + "/" + _this.options.evidenceName,
              success: (res) => {
                if (res.statusCode === 200) {
                  //   var filePath = res.filePath;
                  //   wx.openDocument({
                  //     filePath: filePath + ".pdf",
                  //     showMenu: true,
                  //     success: function (res) {},
                  //     fail: function (resc) {
                  //       console.log(resc, "A错误的A");
                  //     },
                  //   });

                  var filePath = res.tempFilePath;
                  wx.openDocument({
                    filePath: filePath,
                    showMenu: true,
                    success: function (res) {},
                  });
                }
              },
            });
          } else {
            _this.webSrc = _this.imgPrefix + _this.options.evidenceUrl;
            _this.webFlag = true;
          }
        },
      });
    },
    getDetail() {
      imagesPathList({ bizId: this.options.id, bizType: 6 }).then((res) => {
        if (res.code == 200) {
          this.patrolPath = res.result;
        }
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f8f9fb !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.penaltyDetail {
  flex: 1;
  background-color: #f8f9fb;
  margin-bottom: 50px;

  .wrapper {
    position: absolute;
    top: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    // height: calc(100vh - 74px);
    overflow-y: auto;

    .wrapper-item {
      margin-bottom: 2vh;
      padding: 35rpx 40rpx 10rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;

      .nameTitle {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
      }

      .topic {
        display: flex;
        margin-bottom: 30rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #030303;

        image {
          margin-right: 10rpx;
          margin-top: 5rpx;
          width: 30rpx;
          height: 28rpx;
        }
      }

      .listedFiles {
        display: flex;
        margin-top: 15rpx;

        image {
          margin-right: 20rpx;
          width: 96rpx;
          height: 86rpx;
        }

        .lfname {
          margin: 10rpx 0;
          width: 520rpx;
          color: #030303;
          font-size: 28rpx;
          font-weight: bold;
        }

        .lftime {
          display: flex;
          justify-content: space-between;
          color: #a1a1a1;
          font-size: 24rpx;
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;
        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;
          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }
        }
      }
    }

    .wrapper-zero {
      .timeout {
        display: inline-block;
        margin-right: 8rpx;
        padding: 2rpx 8rpx;
        font-size: 26rpx;
        font-weight: 400;
        border-radius: 8rpx;
      }

      .label {
        width: auto;
      }

      .bottomClass {
        margin-bottom: 25rpx;
      }

      .spotImg {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .bcimg {
          margin-top: 16rpx;
          width: 200rpx;
          height: 200rpx;
          image {
            display: block;
            border-radius: 8rpx;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
